import React, { Component } from 'react';
import './pay.css'
import Img_2 from '../images/1.jpg'

export default class Pay extends Component {
    goHomeM = () => {
        this.props.history.push('/homepage')
    }
    goAddressM = () => {
        this.props.history.push('/delivery_address')
    }
    goOrderM = () => {
        this.props.history.push('/order')
    }

    render() {
        return (
            <div>
                <div className="data-content">
                    <div className="wrap">
                        <div className="main-item-left">
                            <header className="main_header">
                                <div onClick={this.goHomeM.bind(this)}>
                                    <span className="logo_text">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>我们的生活市场</font>
                                        </font>
                                    </span>
                                </div>
                                <nav>
                                    <ul className="breadcrumb">
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>信息</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>运输</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>付款</font>
                                                </font>
                                            </span>
                                        </li>
                                    </ul>
                                </nav>
                            </header>
                            <div className="step_sections">
                                <div className="section">
                                    <div className="content-box">
                                        <div className="content-box_row">
                                            <div className="review-block">
                                                <div className="review-block_inner">
                                                    <span className="review-block_label">联系</span>
                                                    <span className="review-block_content">2508178158@qq.com</span>
                                                    <span className="review-block_change">
                                                        <span>更改</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="review-block row">
                                                <div className="review-block_inner">
                                                    <span className="review-block_label">运送到</span>
                                                    <span className="review-block_content">湖北武汉武汉，4000000湖北，中国</span>
                                                    <span className="review-block_change">
                                                        <span>更改</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="contact-information"
                                style={{ marginTop: '3em' }}
                                >
                                    <div className="section_header"
                                    style={{ marginBottom: '1.5em' }}
                                    >
                                        <div className="section_title">邮寄方式</div>
                                    </div>
                                    <div className="section_content">
                                        <div className="content-box">
                                            <div className="content-box_row">
                                                <div className="radio-wrapper">
                                                    <span className="radio_input">

                                                    </span>
                                                    <span className="radio_label">
                                                        <span className="radio_label_primary">邮政运输（12-30天)</span>
                                                        <span className="radio_label_accessory">$ 8.90</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="step__footer">
                                    <button type="submit" className="step__footer__continue-btn btn"
                                    onClick={this.goOrderM.bind(this)}
                                    >
                                        <span>
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>继续付款</font>
                                            </font>
                                        </span>
                                    </button>
                                    <div className="step_back"
                                    onClick={this.goAddressM.bind(this)}
                                    >←返回信息</div>
                                </div>
                                <footer className="main__footer" role="contentinfo">
                                    <p className="copyright-text ">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>版权所有ourlifemarket</font>
                                        </font>
                                    </p>
                                </footer>
                            </div>
                        </div>
                        <div className="main-item-right">
                            <div className="sidebar_content">
                                <div className="product-list">
                                    <div className="product-table">
                                        <span className="product_image">
                                            <div className="product-thumbnail">
                                                <img src={Img_2} alt="" />
                                            </div>
                                            <span className="product-thumbnail__quantity">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>1个</font>
                                                </font>
                                            </span>
                                        </span>
                                        <span className="product_description">
                                            <div className="product_description_name">IT卫衣3D印花连帽外套</div>
                                            <div className="product_description_variant">小号</div>
                                        </span>
                                        <span className="product_price">$ 45.99</span>
                                    </div>
                                </div>
                                <div className="total-lines">
                                    <div className="total-line-one">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">小计</span>
                                            <span className="total-line_price">$ 45.99</span>
                                        </span>
                                    </div>
                                    <div className="total-line-four">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">运输</span>
                                            <span className="total-line_price">$ 8.90</span>
                                        </span>
                                    </div>
                                    <div className="total-line-five">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">税收</span>
                                            <span className="total-line_price">$ 23.45</span>
                                        </span>
                                    </div>
                                    <div className="total-line-three">
                                        <span className="line-subtotal">
                                            <span className="total_name">总</span>
                                            <span className="total_price">$ 45.99</span>
                                            <span className="lines">美元</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
